<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 项目</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico"> <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css?v=4.1.0" rel="stylesheet">

    <style>
        value{
            display: block;
            background: #efefef;
            width: 50px;
            text-decoration:underline;
        }
    </style>
</head>

<body class="gray-bg">

    <div class="wrapper wrapper-content animated fadeInUp">
        <div class="row">
            <div class="col-sm-3">

                <div class="ibox">
                    <div class="ibox-title">
                        <h5>模板历史</h5>
                        <div class="ibox-tools">
                            <a href="javascript:history.back();" title="返回"><i class="fa fa-reply"></i></a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <ul class="list-group clear-list">
                            <jsp:useBean id="dateValue" class="java.util.Date"/>
                            <c:forEach items="${versions }" var="version">
                                <li class="list-group-item fist-item">
                                    <jsp:setProperty name="dateValue" property="time" value="${version.createTime}"/>
                                    <fmt:formatDate value="${dateValue}" var="dateString" pattern="yyyy-MM-dd HH:mm:ss"/>
                                    <span class="pull-right"> ${dateString }</span> 版本号：${version.version }
                                </li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm-9">

                <div class="ibox">
                    <div class="ibox-title">
                        <h5>模板编辑</h5>
                        <div class="ibox-tools">
                            <a href="javascript:save();" title="保存模板"><i class="fa fa-save"></i></a>
                            <a href="javascript:openLike();" title="添加关联模板"><i class="fa fa-link"></i></a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <form class="form-horizontal" method="post">
                            <input name="id" type="text" style="display: none;"
                                   value="'+(result == undefined?'':result.id)+'">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">模板名称：</label>
                                <div class="col-sm-10"><input name="name" type="text" class="form-control" <c:if test="${not empty template }"> value="${template.name }" disabled </c:if> ></div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">模板状态：</label>
                                <div class="col-sm-10">
                                    <div class="radio-inline i-checks">
                                        <label><input type="radio" value="0" name="status" <c:if test="${not empty template }"><c:if test="${template.status == false}">checked</c:if></c:if> > <i></i> 停用</label>
                                    </div>
                                    <div class="radio-inline i-checks">
                                        <label><input type="radio" value="1" name="status" <c:if test="${not empty template }"><c:if test="${template.status == true}">checked</c:if></c:if>> <i></i> 启用</label>
                                    </div>
                                    <div class="checkbox-inline i-checks">
                                        <label><input type="checkbox" name="input" value="1"> <i></i> 允许输入</label>
                                    </div>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <div id="container" style="width: 100%;"></div>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="content" style="display: none;">
        <c:if test="${not empty template }">${template.template }</c:if>
    </div>

    <!-- 全局js -->
    <script src="../js/jquery.min.js?v=2.1.4"></script>
    <script src="../js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../js/plugins/layer/layer.min.js"></script>
    <!-- iCheck -->
    <script src="../js/plugins/iCheck/icheck.min.js"></script>
    <script src="../js/jquery.form.js"></script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="../js/plugins/ueditor/template.ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="../js/plugins/ueditor/ueditor.all.js"></script>
    <script type="text/javascript" src="../template/input.template.js"></script>
    <script type="text/javascript" src="../template/foreach.template.js"></script>
    <!-- 自定义js -->
    <script src="../js/content.js?v=1.0.0"></script>


    <script>

        var ue;
        $(document).ready(function() {

            $('body').ready(function () {
                $(".i-checks").iCheck({checkboxClass: "icheckbox_square-green", radioClass: "iradio_square-green",})
            });

            $('#loading-example-btn').click(function () {
                btn = $(this);
                simpleLoad(btn, true);

                // Ajax example
//                $.ajax().always(function () {
//                    simpleLoad($(this), false)
//                });

                simpleLoad(btn, false);
            });

            ue = UE.getEditor('container');
            //对编辑器的操作最好在编辑器ready之后再做
            ue.ready(function() {
                //设置编辑器的内容
                ue.setContent($('#content').html());
            });
        });

        var link = [1,3];

        function openLike() {

            var html =
                '<div class="ibox-content" style="overflow: auto;height: 300px;">'+
                '<form class="form-horizontal" method="post">' +
                '   <div class="form-group"> '+
                '       <div class="col-sm-12">' +
                '           <div class="checkbox i-checks"><label><input type="checkbox" value="1"> <i></i> 选项1</label></div>' +
                '       </div> '+
                '   </div> '+
                '   <div class="form-group"> '+
                '       <div class="col-sm-12">' +
                '           <div class="checkbox i-checks"><label><input type="checkbox" value="2"> <i></i> 选项1</label></div>' +
                '       </div> '+
                '   </div> '+
                '   <div class="form-group"> '+
                '       <div class="col-sm-12">' +
                '           <div class="checkbox i-checks"><label><input type="checkbox" value="3"> <i></i> 选项1</label></div>' +
                '       </div> '+
                '   </div> '+
                '</form>'+
                '</div>';
            layer.open({
                type: 1,
                area: ['300px', 'auto'],
                title: '新建归档',
                content: html,
                btn: ['保存', '取消'],
                success:function (layero, index) {
                    $(link).each(function () {
                        $(layero).find('input[value="'+this+'"]').attr('checked',true);
                    });
                    $(layero).ready(function(){$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",})});
                },
                yes: function (index, layero) {
                }
            });
        }
        
        function save() {
            var template = {
                id:'<c:if test="${not empty template }">${template.id }</c:if>',
                name:$('input[name="name"]').val(),
                status:$('input[name="status"]').val(),
                template:ue.getContent(),
            }
            
            $.post(
                "${path}/api/template/save",
                template,
                function (result) {
                    if (result.code == "${result_success}") {
                        layer.msg("保存成功！");
                    }else {
                        layer.msg(result.data);
                    }
                },
                'json'
            );
        }
    </script>

    </body>
</html>
